<template>
  <div class="logic-config">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px" @submit.native.prevent>
          <el-form-item prop="channel" label="购买渠道">
            <!-- <SelectForDict :code.sync="formData.channel" dict-type-code="PURCHASE_CHANNEL" placeholder="请选择购买渠道" clearable filterable @update:code="handleChannelChange"></SelectForDict> -->
            <SelectForDict :code.sync="formData.channel" dict-type-code="PURCHASE_CHANNEL" placeholder="请选择购买渠道" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item prop="businessType" label="一级业务类型">
            <!-- <SearchSelectPicker
              placeholder="请选择一级业务类型"
              lable-name="businessTypeName"
              value-name="businessType"
              :parent-id="formData.channel"
              must-pid
              :disabled="formData.channel===''||formData.channel===undefined"
              method="get"
              :url="`/call-center/api/v2/channelBusinessRelation/queryBusiness/${formData.channel}`"
              :value.sync="formData.businessType"
              @selectChange="handleSelectChange"
            ></SearchSelectPicker> -->
            <SelectForDict :code.sync="formData.businessType" dict-type-code="FIRST_LEVEL_BUSINESS_TYPE" placeholder="请选择一级业务类型" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item prop="businessTypeTwo" label="二级业务类型">
            <!-- <SearchSelectPicker
              placeholder="请选择二级业务类型"
              lable-name="businessTypeTwoName"
              value-name="businessTypeTwo"
              :parent-id="secondBTpe"
              :disabled="!secondBTpe"
              must-pid
              method="get"
              :url="`/call-center/api/v2/channelBusinessRelation/queryBusinessTwo/${formData.channel}/${formData.businessType}`"
              :value.sync="formData.businessTypeTwo"
            ></SearchSelectPicker> -->
            <SelectForDict :code.sync="formData.businessTypeTwo" dict-type-code="SECOND_LEVEL_BUSINESS_TYPE" placeholder="请选择二级业务类型" clearable filterable></SelectForDict>
          </el-form-item>
          <!-- <el-form-item prop="agingTreatment" label="处理时效" hidden>
            <el-input v-model="formData.agingTreatment" number placeholder="请输入处理时效"></el-input>
          </el-form-item> -->
          <el-form-item label="原因类型" prop="workCaseType">
            <SelectForDict :code.sync="formData.workCaseType" dict-type-code="REASON_TYPE" placeholder="请选择原因类型" clearable filterable @on-change="handleOnChange"></SelectForDict>
          </el-form-item>
          <el-form-item label="工单原因" prop="workCaseValue">
            <SearchSelectPicker
              placeholder="请选择工单原因"
              lable-name="dictName"
              value-name="dictCode"
              :parent-id="formData.workCaseTypeId"
              :disabled="!formData.workCaseTypeId"
              must-pid
              method="get"
              :url="`/data-dict/api/v2/dictionary/child`"
              :params="{
                type: 1,
                query: {
                  parentDictId: formData.workCaseTypeId
                }
              }"
              :value.sync="formData.workCaseValue"
            ></SearchSelectPicker>
          </el-form-item>
          <!-- <el-form-item prop="workCaseValue" label="工单原因" hidden>
            <SelectForDict :code.sync="formData.workCaseValue" dict-type-code="DELIVERY_INSTALL_DEMAND" placeholder="请选择工单原因" clearable filterable></SelectForDict>
          </el-form-item> -->
          <el-form-item prop="handleScheme" label="处理方案">
            <SelectForDict :code.sync="formData.handleScheme" dict-type-code="PROCESS_METHOD" placeholder="请选择处理方案" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item prop="dealerPostCode" label="处理人岗位">
            <SelectForDict :code.sync="formData.dealerPostCode" dict-type-code="DEPT_POST_CODE" placeholder="请选择处理人岗位" clearable filterable></SelectForDict>
          </el-form-item>
          <!-- <el-form-item prop="complaintObject" label="被投诉对象">
            <SelectForDict :code.sync="formData.complaintObject" dict-type-code="OBJECT_OF_COMPLAINT" placeholder="请选择被投诉对象" clearable filterable></SelectForDict>
          </el-form-item> -->
          <el-form-item prop="includeCreator" label="是否包含创建人">
            <SearchSelectPicker
              placeholder="请选择是否包含创建人"
              lable-name="dictName"
              value-name="dictCode"
              :select-data="whetherList"
              :value.sync="formData.includeCreator"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="ccPostCode" label="抄送岗位">
            <SelectForDict :code.sync="formData.ccPostCode" dict-type-code="DEPT_POST_CODE" placeholder="请选择抄送岗位" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item prop="state" label="启用状态">
            <SearchSelectPicker
              placeholder="请选择启用状态"
              lable-name="dictName"
              value-name="dictCode"
              :select-data="enableList"
              :value.sync="formData.state"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item more show>
            <Button @click="resetForm">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div>
        <AddOrEdit @on-refresh="handleRefresh"></AddOrEdit>
        <AddOrEdit is-edit :selection="selection" @on-refresh="handleRefresh"></AddOrEdit>
        <Button type="primary" @click="handleUpdateEnable(1)">启用</Button>
        <Button type="primary" @click="handleUpdateEnable(0)">停用</Button>
        <Button type="primary" @click="handleRemove">删除</Button>
      </div>
      <table-box ref="tableBox" show-selection show-index no-request :other-filters="filtersRaw" :selected-arry.sync="selection" :table-config="tableConfig" @selection-change="handleSelectionChange"></table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import SelectForDict from '@/components/SelectForDict'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import AddOrEdit from './components/AddOrEdit'
import { disableBatch, enableBatch, deleteBatch } from '@/api/distributionLogicConfig'
import { deepCopy } from '@/utils/'
import { ArrayFormat } from '@/utils/params-format'
export default {
  name: 'DistributionLogicConfig',
  components: {
    ContentWrap,
    FormContainer,
    SelectForDict,
    SearchSelectPicker,
    AddOrEdit
  },
  data() {
    return {
      whetherList: [
        { dictCode: '0', dictName: '否' },
        { dictCode: '1', dictName: '是' }
      ],
      enableList: [
        { dictCode: '0', dictName: '停用' },
        { dictCode: '1', dictName: '启用' }
      ],
      formData: {
        channel: '',
        businessType: '',
        businessTypeTwo: '',
        // agingTreatment: '',
        workCaseType: '',
        workCaseTypeId: '',
        workCaseValue: '',
        handleScheme: '',
        ccPostCode: '',
        // complaintObject: '',
        dealerPostCode: '',
        includeCreator: '',
        state: ''
      },
      formRules: {

      },
      tableConfig: {
        interfacePath: `/call-center/api/v1/dispatchChannelBusinessRelation/page`,
        tableIndex: 1,
        hideFuncBar: false,
        buttonGroupCode: 'default',
        // order: 'DESC',
        // sort: 'createTime',
        sortersRow: [
          { id: 'createTime', property: 'createTime', direction: 'DESC' },
          { id: 'state', property: 'state', direction: 'DESC' }
        ],
        setting: [
          {
            prop: 'channel',
            label: '购买渠道',
            minWidth: 100,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'call-center',
              dictTypeCode: 'PURCHASE_CHANNEL'
            }
          },
          {
            prop: 'businessTypeName',
            label: '一级业务类型',
            minWidth: 130
          },
          {
            prop: 'businessTypeTwoName',
            label: '二级业务类型',
            minWidth: 130
          },
          {
            prop: 'workCaseTypeDesc',
            label: '原因类型',
            minWidth: 130
          },
          {
            prop: 'workCaseValueDesc',
            label: '工单原因',
            minWidth: 130
          },
          {
            prop: 'handleSchemeName',
            label: '处理方案',
            minWidth: 120
          },
          // {
          //   prop: 'complaintObjectName',
          //   label: '被投诉对象',
          //   minWidth: 120
          // },
          // {
          //   prop: 'agingTreatment',
          //   label: '时效',
          //   minWidth: 80
          // },
          {
            prop: 'level',
            label: '优先级',
            minWidth: 100,
            formatData(row) {
              return row.combinationDTO ? row.combinationDTO.level : ''
            }
          },
          {
            prop: 'dealerPostName',
            label: '处理人岗位',
            minWidth: 140
          },
          {
            prop: 'includeCreator',
            label: '处理人是否包含创建人',
            minWidth: 150,
            formatData(row) {
              return [1, '1'].includes(row.includeCreator) ? '是' : '否'
            }
          },
          {
            prop: 'ccPostName',
            label: '抄送岗位',
            minWidth: 120
          },
          {
            prop: 'state',
            label: '启用状态',
            minWidth: 100,
            formatData(row) {
              return [1, '1'].includes(row.state) ? '启用' : '停用'
            }
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 140
          },
          {
            prop: 'lastUpdateBy',
            label: '最近修改人',
            minWidth: 130
          },
          {
            prop: 'lastUpdateTime',
            label: '最近修改时间',
            minWidth: 140
          }
        ]
      },
      selection: [],
      filtersRaw: []
    }
  },
  computed: {
    secondBTpe() {
      const t = this.formData
      const t1 = t.channel !== undefined && t.businessType !== undefined && t.channel !== '' && t.businessType !== ''
      return t1 ? `${t.channel}-${t.businessType}` : undefined
    }
  },
  methods: {
    handleChannelChange() {
      this.$set(this.formData, 'businessType', '')
      this.$set(this.formData, 'businessTypeName', '')
      this.$set(this.formData, 'businessTypeTwo', '')
      this.$set(this.formData, 'businessTypeTwoName', '')
    },
    handleSelectChange() {
      this.$set(this.formData, 'businessTypeTwo', '')
      this.$set(this.formData, 'businessTypeTwoName', '')
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    queryHandle() {
      const data = deepCopy(this.formData)
      // delete data.workCaseType
      delete data.workCaseTypeId
      const filtersRaw = [...ArrayFormat(data, {
        channel: '=',
        businessType: '=',
        businessTypeTwo: '=',
        // agingTreatment: '=',
        handleScheme: '=',
        workCaseValue: '=',
        ccPostCode: '=',
        // complaintObject: '=',
        dealerPostCode: '=',
        includeCreator: '=',
        state: '='
      })]
      this.filtersRaw = filtersRaw
      this.refreshTable()
    },
    handleRefresh(type) {
      this.refreshTable(type)
    },
    refreshTable(type) {
      this.selection = []
      this.$nextTick(() => {
        this.$refs.tableBox && this.$refs.tableBox.initTableData(type)
      })
    },
    handleSelectionChange(selection) {
      this.selection = selection
    },
    handleUpdateEnable(type) {
      if (!this.singleJudge(this.selection, type === 1 ? '启用' : '停用', false)) {
        return Promise.reject('')
      }
      const t = this.selection.map(e => e.state)
      if (type === 1 && (t.includes(1) || t.includes('1'))) {
        this.$message.warning('所选数据包含【启用】项!')
        return Promise.reject('')
      } else if (type === 0 && (t.includes(0) || t.includes('0'))) {
        this.$message.warning('所选数据包含【停用】项!')
        return Promise.reject('')
      }
      const ajax = type === 1 ? enableBatch : disableBatch
      return ajax(this.selection.map(e => e.id)).then(res => {
        this.$message.success('操作成功!')
        this.refreshTable('onPage')
      })
    },
    handleRemove() {
      if (!this.singleJudge(this.selection, '删除', false)) {
        return Promise.reject('')
      }
      const t = this.selection.map(e => e.state)
      if (t.includes(1) || t.includes('1')) {
        this.$message.warning('所选数据包含【启用】项,不能删除启用项!')
        return Promise.reject('')
      }
      return deleteBatch(this.selection.map(e => e.id)).then(res => {
        this.$message.success('操作成功!')
        this.refreshTable()
      })
    },
    handleOnChange(data) {
      if (data) {
        this.$set(this.formData, 'workCaseTypeId', data.dictId)
      } else {
        this.$set(this.formData, 'workCaseTypeId', '')
      }
      this.$set(this.formData, 'workCaseValue', '')
    }
  }
}
</script>
<style lang="scss" scoped>
.logic-config{
}
</style>
